<!-- TableComponent.vue -->
<template>
  <div class="table">
    <div class="wrapper main-card selector-wrapper">
    <el-button type="info" class="add" plain @click="dialogVisible = true">新增模板</el-button>
  </div>
    <!-- 主页面 -->
    <el-table
      :data="pageData
      "
    >
      <el-table-column prop="subsidy_name" label="模板名称"></el-table-column>
      <el-table-column prop="subsidy_money" label="补助金额"></el-table-column>
      <el-table-column prop="subsidy_obj" label="补助对象" :formatter="formatSubsidyObject"></el-table-column>
      <el-table-column prop="subsidy_time" label="补助周期(月)"></el-table-column>
      <el-table-column prop="createdAt"  label="创建时间"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
            <el-button   @click="upbutton(scope.row)">修改</el-button>
        </template>
      </el-table-column>

    </el-table>
    <div class="pagination-container">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total=total>
    </el-pagination>
  </div>
   <!-- 弹窗 -->
   <el-dialog
       title="新增模板"
       :visible.sync="dialogVisible"
      width="800px"
      class="cleaner-dialog"
      :before-close="cleanSelected"
    >
    <el-form class="form" ref="form" :model="formData">
      <el-form-item label="模板名称"  >
        <el-input v-model.trim="formData.subsidy_name" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="补助金额"  >
        <el-input
          v-model.trim="formData.subsidy_money"
          placeholder="请输入"
        ></el-input>
      </el-form-item>
   
      <el-form-item label="补助周期(月)"  >
        <!-- <el-select v-model.trim="formData.subsidy_time" placeholder="请选择" :clearable="true"> 
          <el-option 
            v-for="item in subsidy_time"
            :key="item.id"
            :label="item.obj"
            :value="item.obj"
          >
          </el-option>
       </el-select> -->
       <div>
      <SelectMonths
        ref="selectMonths"
        v-model="formData.subsidy_time"
        placeholder="请选择月份"
        @submitBtn="submitBtn"
        @resetBtn="resetBtn" />
    </div>
      </el-form-item>
   

      <el-form-item label="补助对象"  >
        <el-select v-model.trim="formData.subsidy_obj" placeholder="请选择" :clearable="true"> 
          <el-option 
            v-for="item in obj"
            :key="item.id"
            :label="item.obj"
            :value="item.value"
          >
          </el-option>
       </el-select>
      </el-form-item>
      
    </el-form>
      <span slot="footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
       title="模板信息"
       :visible.sync="dialogVisible2"
      width="800px"
      class="cleaner-dialog"
      :before-close="cleanSelected"
    >
    <el-form class="form" ref="form" :model="formData2">
      <el-form-item label="模板名称"  >
        <el-input v-model.trim="formData2.subsidy_name" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="补助金额"  >
        <el-input
          v-model.trim="formData2.subsidy_money"
          placeholder="请输入"
        ></el-input>
      </el-form-item>
      <el-form-item label="补助周期(月)"  >
        <div>
      <SelectMonths
        ref="selectMonths"
        v-model="monthsValue"
        placeholder="请选择月份"
        @submitBtn="submitBtn2"
        @resetBtn="resetBtn2" />
    </div>
      </el-form-item>
      <el-form-item label="补助对象"  >
        <!-- <el-input v-model.trim="formData2.contract" placeholder="请输入"></el-input> -->
        <el-select v-model.trim="formData2.subsidy_obj" placeholder="请选择" :clearable="true"> 
          <el-option 
            v-for="item in obj"
            :key="item.id"
            :label="item.obj"
            :value="item.value"
          >
          </el-option>
       </el-select>
      </el-form-item>
      
    </el-form>
      <span slot="footer">
        <el-button @click="dialogVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmit2">确 定</el-button>
      </span>
    </el-dialog>

  </div>
  
</template>

<script>
import { getsubsidys ,upsubsidys,insubsidys} from '@/api/meter.js'
import SelectMonths from './SelectMonths.vue'
import { addtemplate } from '@/api/template.js'

export default {
  components: {
      SelectMonths
    },

  name: 'RentTable',
  data() {
    return {
      monthsValue: [],
      // 显示主页面
      showMain: true,
      // 显示租金页面
      dialogVisible: false,
      dialogVisible2: false,
      tableData: [],
      currentPage: 1,
          pageData:[],
        total:'',
        pageSize: 10,
      selectData:'',
      obj:[{id:1,obj:'学生',value:'student'},
      {id:2,obj:'老师',value:'teacher'},
      {id:3,obj:'职工',value:'workers'}

    ],
    subsidy_time:[{id:1,obj:'一个月'},
      {id:2,obj:'三个月'},
      {id:3,obj:'半年'}

    ],
    value5: '',
      formData: {
        subsidy_name: '',
        subsidy_obj: '',
        subsidy_money: '',
        subsidy_time: '',
      },
      formData2:{
        
      }
    }
  },
  mounted() {
    
    this.fetchData()
  },
  methods: {
               // 实现分页的方法
   queryByPage () {
      // 起始位置 = (当前页 - 1) x 每页的大小
      const start = (this.currentPage - 1) * this.pageSize
      // 结束位置 = 当前页 x 每页的大小
      const end = this.currentPage * this.pageSize

      return this.tableData.slice(start, end)
    },
        handleSizeChange(val) {
          this.pageSize = val

this.pageData = this.queryByPage()
      },
      handleCurrentChange(val) {
        this.currentPage = val

this.pageData = this.queryByPage()
      },

    submitBtn(val) {
        const months = JSON.parse(JSON.stringify(val))
        this.formData.subsidy_time = months.join(',')
      },
      resetBtn() {
        this.formData.subsidy_time = null
      },
      submitBtn2(val) {
        const months = JSON.parse(JSON.stringify(val))
        this.monthsValue = months.join(',')
      },
      resetBtn2() {
        this.monthsValue = null
      },
    formatSubsidyObject(row) {
    if (row.subsidy_obj === 'student') {
      return '学生';
    }
    if (row.subsidy_obj === 'teacher') {
      return '老师';
    }
    if (row.subsidy_obj === 'workers') {
      return '职工';
    }
    // 如果有其他情况，可以继续添加判断和对应的返回值
    // else if (row.subsidy_obj === 'otherValue') {
    //   return '其他文本';
    // }
    // ...
    else {
      return row.subsidy_obj;
    }
  },
    // 获取服务器数据
    fetchData() {
      // 数据接口
      getsubsidys().then(res => {
        console.log(res)
        this.tableData=res.data.subsidy
        this.total=res.data.subsidy.length
        this.pageData=res.data.subsidy
      })
    },
    //新增
    handleSubmit(){
console.log(this.formData)

insubsidys(this.formData).then(res => {
        if(res.success==true){
          this.$message.success('新增成功')
        this.dialogVisible=false
        this.fetchData()

        }

      })
    },
    //修改
    handleSubmit2(){
      this.formData2.subsidy_time=this.monthsValue
      console.log(this.formData2)

upsubsidys(this.formData2).then(res => {
        if(res.success==true){
          this.$message.success('修改成功')
        this.dialogVisible2=false
        this.fetchData()
        }

      })
    },
    upbutton(rwo){
console.log(rwo)
this.formData2=rwo
this.monthsValue=''
console.log(this.formData2)
console.log(this.monthsValue)

this.dialogVisible2=true
    }
  }
}
</script>

<style scoped>

.search {
  width: 400px;
  margin: 20px 20px 20px 0px;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.wrapper {
  margin: 40px 0;
}
.add{
  float: right;
    padding: 9px 15px;
    font-size: 12px;
    border-radius: 3px;
}
.el-select {
    display: block;
    position: relative;
    position: relative;
}
.pagination-container {
    display: flex;
    justify-content: center;
    margin-top: 20px; /* Adjust margin as needed */
  }

</style>
